<template>
  <div>
    <el-card>
      <el-tabs>
        <el-tab-pane
          label="角色管理"
          lazy
        ><el-button
           type="primary"
           size="small"
           @click="addClick"
         >+新增角色</el-button>
          <el-table :data="list" border>
            <el-table-column label="序号" type="index" width="180">
              <template v-slot="{ $index }">
                <div>
                  <!-- 让每页显示的和下一页显示的序号不断 -->
                  <!-- 页码数-1 * 每页显示的数据 + 索引+1 -->
                  {{ (page.page - 1) * page.pagesize + $index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="角色名" prop="name" />
            <el-table-column label="描述" prop="description" />
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <div>
                  <el-button type="text" @click="permissionClick(row)">
                    分配权限
                  </el-button>
                  <el-button type="text" @click="edit(row)"> 修改 </el-button>
                  <el-button type="text" @click="del(row)"> 删除 </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.page"
            :page-sizes="[1, 3, 5, 7, 10]"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息" lazy>
          <Info />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <Add ref="show" @getData="getData" />
    <!-- 分配权限 -->
    <set-permission ref="SetPermission" :is-show.sync="showPermission" />
  </div>
</template>

<script>
import { sysRole, sysRoleDelete } from '@/api/setting.js'
import Add from './components/add.vue'
import SetPermission from './components/setPermission.vue'
export default {
  components: {
    // 使用异步组件导入注册
    Info: () => import('./components/info.vue'),
    Add,
    SetPermission
  },
  data() {
    return {
      // 将请求得到的name和id等数据在数据中存储
      list: [],
      showPermission: false,
      page: {
        page: 1, // 页码
        pagesize: 10, // 每页条数
        total: 100
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleSizeChange(size) {
      // 将选中的每页显示的条数 赋值给数据中每页的条数
      this.page.pagesize = size
      this.getData()
      // 页容量改变，页码最好回到第一页
      this.page.page = 1
      console.log(`每页 ${size} 条`)
    },
    handleCurrentChange(page) {
      // 将选中的页数传值给定义数据的page页码
      this.page.page = page
      this.getData()
      console.log(`当前页: ${page}`)
    },
    async getData() {
      // 发请求拿到数据
      // 将数据中的页码数和每页显示的条数传给接口
      const res = await sysRole(this.page)
      // 将获取到的总数据数 赋值给数据中的总数据数
      this.page.total = res.data.total
      this.list = res.data.rows
      // console.log(res)
    },
    // 新增按钮点击
    addClick() {
      this.$refs.show.isShow = true
      this.$refs.show.mode = 'add'
      // console.log(this.$refs.show.isShow)
    },
    // 删除
    del(row) {
      // row为当前点击的数据
      this.$confirm('您确定要删除角色吗？', '提示')
        .then(async() => {
          await sysRoleDelete(row.id)
          this.$message.success('删除成功')
          // 刷新列表数据回到第一页
          this.handleSizeChange(1)
        })
        .catch(() => {})
    },
    // 编辑
    edit(row) {
      // row为当前点击的数据
      // console.log(row)
      // 将对话框显示
      this.$refs.show.isShow = true
      // 将点击的编辑按钮edit传给对话框的mode属性
      this.$refs.show.mode = 'edit'
      // 回显 将数据进行深拷贝以免更改数据视图发送同时改变
      this.$refs.show.form = JSON.parse(JSON.stringify(row))
    },
    // 分配权限
    permissionClick(row) {
      this.showPermission = true
      this.$refs.SetPermission.getRoleInfo(row)
    }
  }
}
</script>

<style></style>
